<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>1-2 JS HTML DOM</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
    <h1>1-2 JS HTML DOM</h1>
    <h3>DOM简介与查找</h3>
    <p>DOM == Document Object Model</p>
    <p>查找元素：
        <br><code>var x=document.getElementById("main");</code>
        <br><code>var y=x.getElementsByTagName("p");</code>（查找id为main的元素下的所有p元素）
        <br><code>var z=document.getElementsByClassName("container");</code>（查找id为main的元素下所有class为container的元素）
    </p>
    <p class="alert alert-danger well-sm">通过类名查找HTML元素在ie5、6、7、8中无效</p>

    <h3>改变DOM内容</h3>
    <p>改变html元素<strong>内容</strong>：<code>document.getElementById("content").innerHTML = "newText"</code></p>
    <p>改变html元素<strong>属性</strong>：<code>document.getElementById("img").src = "qingdao.jpg"</code></p>
    <p>改变html元素<strong>样式</strong>：<code>document.getElementById("p1").style.color = "blue"</code></p>

    <h3>HTML事件</h3>
    <p>常用的事件类型有：
    <ol>
        <li>当用户点击鼠标时</li>
        <li>当网页已加载时</li>
        <li>当图像已加载时</li>
        <li>当鼠标移动到元素上时</li>
        <li>当输入字段被改变时</li>
        <li>当提交 HTML 表单时</li>
        <li>当用户触发按键时</li>
    </ol>
    <p>一个鼠标移入移出的事件例子：<code>onmouseover="style.color='red'" onmouseout="style.color='blue'"</code>
    <h4 onmouseover="style.color='red'" onmouseout="style.color='blue'">
        请把鼠标移到这段文本上
    </h4>

    <h3>HTML元素的节点</h3>
    <p>添加节点的步骤：<button class="btn btn-primary btn-sm form-inline" onclick="addHtmlNode()">测试添加节点</button>
        <ol>
            <li>创建一个新的元素<code>var strong = document.createElement("strong");</code></li>
            <li>创建一个新的文本节点<code>var txt = document.createTextNode("这是新添加的文本节点; ");</code></li>
            <li>将文本节点添加到创建的元素里<code>strong.appendChild(txt);</code></li>
            <li>向已有元素追加新元素<code>document.getElementById("addHtmlNode").appendChild(strong);</code></li>
        </ol>
    <p>删除节点的步骤：<button class="btn btn-primary btn-sm form-inline" onclick="rmHtmlNode()">测试删除节点</button>
        <ol>
            <li>获取子元素节点（这里是数组）<code>var strong = document.getElementsByClassName("willBeRm");</code>(生成元素时已添加此类名)</li>
            <li>获取父元素节点<code>var parent = document.getElementById("addHtmlNode");</code></li>
            <li>从父节点中删去子节点<code>if(strong[0]) parent.removeChild(strong[0]);</code></li>
            <li>也可以没有步骤2，直接查找自己的父元素然后删掉自己<code>if(strong[0]) strong[0].parentNode.removeChild(strong[0]);</code></li>
        </ol>
    <p id="addHtmlNode"></p>









</div>

<script src="js/jquery-2.2.4.js"></script>
<script src="js/main.js"></script>
<script>
    function addHtmlNode() {
        var strong = document.createElement("strong");
        var txt = document.createTextNode("这是新添加的文本节点; ");
        strong.className += "willBeRm";
        strong.appendChild(txt);
        document.getElementById("addHtmlNode").appendChild(strong);
    }
    function rmHtmlNode() {
        var strong = document.getElementsByClassName("willBeRm");
        var parent = document.getElementById("addHtmlNode");
        if(strong[0]){
            parent.removeChild(strong[0]);
//            strong[0].parentNode.removeChild(strong[0])
        }
    }


    $(function () {

    })

</script>
</body>
</html>
